<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-16 15:49:48
-->
<template>
<div class="home">
  <div class="top">
    <div class="general">
      
      <!-- 热门 -->
      <div class="hotThing" >
        <div class="hotThingP" v-html="hotThings"></div>
      </div>
      <!-- //热门 -->
      
      <!-- 轮播 -->
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="" width="100%"  height="300px">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- //轮播 -->

      <!-- 内容推荐 -->
      <div class="recommended">
        <div class="recommededP" v-html="recommendedPs"></div>
      </div>
      <!-- //内容推荐 -->

    </div>
  </div>
  <!-- 中间内容 -->
  
    <!-- 布局 -->
  <div class="content">
    <div class="general">
      <div class="contentTop">
        <div class="contentTop line">
          <p class="lineP1">COME IN WITH ME</p>
          <p class="lineP2">带你走进前端的世界</p>
        </div>
      </div>
      <el-row :gutter="0">

      <el-col  :xs="24" :sm="12" :md="12" :lg="6">
        <!-- 图片 1 -->
          <div class="grid-content bg-purple p1">
            <img src="../../public/images/前段图片1.1.jpeg" class="p1Img" alt="">
            <div class="p1Text">
              HTML专栏
            </div>
          </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <!-- 图片 2 -->
        <div class="grid-content bg-purple p2">
          <img src="../../public/images/jquery1.1.jpeg" class="p2Img" alt="">
          <div class="p2Text">
              jQuery专栏
            </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        <!-- 图片 3 -->
        <div class="grid-content bg-purple p3">
          <img src="../../public/images/css图片.jpeg" class="p3Img" alt="">
          <div class="p3Text">
              CSS专栏
            </div>
        </div>
      </el-col>
      </el-row>

      <el-row :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        <!-- 图片 4 -->
        <div class="grid-content bg-purple p4">
          <img src="../../public/images/WTM图片.jpg" class="p4Img" @click="toWTM_View" alt="">
            <div class="p4Text">
              WTM工坊
            </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <!-- 图片 5 -->
        <div class="grid-content bg-purple p5">
          <img src="../../public/images/微信小程序.jpeg" class="p5Img" alt="">
            <div class="p5Text">
              微信小程序
            </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <!-- 图片 6 -->
        <div class="grid-content bg-purple p6">
          <img src="../../public/images/nodejs.jpg" class="p6Img" alt="">
            <div class="p6Text">
              node.js
            </div>
        </div>
      </el-col>
      </el-row>
    </div>
  </div>
  <!-- 底部空内容 -->
  <el-empty :image-size="400"></el-empty>
  <!-- //底部空内容 -->
  <Footer></Footer>
</div>
</template>

<style lang="scss" scoped>
.home{
  background-color: #f8f8f8;
}
/* 顶部大块 */
.top{
  padding: 0.5em 0;
}
/* 通用 */
.general{
  width: 94%;
  margin: 0 auto;
}
.top .general::after{
  content: "";
  display: block;
  clear: both;
}
/* 热门 */
.hotThing{
  width: 26%;
  height: 300px;
  background-color: #f4f4f4;
  border-radius: 5px;
  float: left;
}
.hotThingP{
  margin-left: 5%;
}
/* 轮播图 */
.carousel{
  width: 46%;
  height: 300px;
  background-color: lightcoral;
  border-radius: 5px;
  float: left;
  margin-left: 1%;

}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


/* 推荐 */
.recommended{
  width: 26%;
  height: 300px;
  background-color: #f4f4f4;
  border-radius: 5px;
  float: right;
}
.recommededP{
  margin-left: 5%;
}


/* /顶部大块 */

/* 内容 */
.content{
  background: url('../../public/images/index-flow.jpg');
}
 /* 布局 */
 .contentTop{
   height: 200px;
   margin: 10px 0;
 }
 .contentTop .line{
   position: relative;
   width: 300px;
   height: 200px;
   border-top: 3px solid orange;
   top: 100px;
   left: 80px;
 }
 .lineP1{
   margin-top: 20px;
    font-size: 16px;
    color: #fff;
 }
 .lineP2{
   font-size: 33px;
   color:#fff
 }
 /* 图片 */
 .el-row {
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0px;
    }
  }
  .grid-content{
    height: 350px;
    position: relative;
  }
  .p1,.p2,.p3,.p4,.p5,.p6 {
    overflow: hidden;
  }
  /* 图片中文字样式 */
  .p1Text ,.p2Text,.p3Text,.p4Text,.p5Text,.p6Text{
    line-height: 40px;
    z-index: 9;
    font-size: 18px;
    color: #fff;
    position: absolute;
    bottom: 2px;
    left: 20px;
  }
  
  .p1Text{
    border-bottom: 5px solid orange;
  }
  .p2Text{
    border-bottom: 5px solid green;
  }
  .p3Text{
    border-bottom: 5px solid blue;
  }
  .p4Text{
    border-bottom: 5px solid yellow;
  }
  .p5Text{
    border-bottom: 5px solid darkorchid;
  }
  .p6Text{
    border-bottom: 5px solid red;
  }
  /* 图片悬停样式 */
  .p3Img,.p1Img ,.p2Img,.p4Img,.p5Img,.p6Img{
    transition:all 0.6s;
    z-index: 1;
    filter: brightness(70%);
    width: 100%;
    height: 100%;
  }
  .p3Img:hover,.p2Img:hover ,.p1Img:hover,.p4Img:hover,.p5Img:hover,.p6Img:hover{
  transform: scale(1.2);
  }
</style>

<script>
import {get}from '../utils/request'
import Footer from './components/Footer.vue';
import Header from './components/Header.vue';
export default{
  components: { Header, Footer },
  data(){
    return{
      carousels:[],
      hotThings:'',
      recommendedPs:'',
    }
  },
  //生命周期钩子 vue实例刚刚创建完成，页面还没完全渲染出来的时候
  created(){
    this.loadHotThings();
    this.loadCarousels();
    this.loadRecommendedPs();
  },
  methods:{
    //热门
    loadHotThings(){
      let url="/index/article/findById?id=90"
      get(url).then((resp)=>{
        this.hotThings=resp.data.content
      })
    },
    //加载轮播图数据
    loadCarousels(){
      let url="/index/carousel/findAll"
      get(url).then((resp)=>{
        this.carousels=resp.data;
      })
    },
    //加载推荐内容
    loadRecommendedPs(){
       let url="/index/article/findById?id=89"
       get(url).then((resp)=>{
       this.recommendedPs=resp.data.content
    })
    },

    //点击WTM图片跳转
    toWTM_View(){
      this.$router.push({ path: "/wtm-view" });
    },
    //获取图片宽度
   
    }}

</script>